<template>
  <FormItemWrapper :component="component">
    <InputNumber v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
                 :size="component.compConfigData.widgetConfig.size"
                 :placeholder="component.compConfigData.widgetConfig.placeholder"
                 :disabled="component.compConfigData.widgetConfig.disabled"
                 :readonly="component.compConfigData.widgetConfig.readonly"
                 :max="component.compConfigData.widgetConfig.max"
                 :min="component.compConfigData.widgetConfig.min"
                 :step="component.compConfigData.widgetConfig.step"
                 :editable="component.compConfigData.widgetConfig.editable"
                 :precision="component.compConfigData.widgetConfig.precision"
                 :element-id="component.compConfigData.widgetConfig.elementId"
                 :active-change="component.compConfigData.widgetConfig.activeChange"
                 @on-change="onChangeHandler"
                 @on-focus="onFocusHandler"
                 @on-blur="onBlurHandler"
    />
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemInputNumberWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, '数字输入框'),
      widgetConfig: {
        size: 'default',
        placeholder: '',
        disabled: false,
        readonly: false,
        max: 1000,
        min: 0,
        step: 1,
        editable: true,
        precision: 0,
        activeChange: true,
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '数据改变时触发', resultValues: ['event'], code: ''},
        onFocus: {remark: '输入框聚焦时触发', resultValues: [], code: ''},
        onBlur: {remark: '输入框失去焦点时触发', resultValues: [], code: ''},
      })

    })
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onChangeHandler(event) {
      this.runWidgetEventCode('onChange', (fn)=>{
        fn.call(this, event)
      })
    },
    onFocusHandler() {
      this.runWidgetEventCode('onFocus')
    },
    onBlurHandler() {
      this.runWidgetEventCode('onBlur')
    },
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
